<!-- 考试结果 -->
<template>
  <div class="result-page">
    <!-- 标题区域 -->
    <div class="header">
      <h1>成都市市场监督管理局教育培训中心</h1>
    </div>

    <!-- 主体内容 -->
    <div class="content-wrapper">
      <h2>考试结果</h2>
      <div class="result-info">
        <div class="info-row">
          <span class="label">考试成绩</span>
          <span class="value">{{ score }}</span>
        </div>
        <div class="info-row">
          <span class="label">成绩结果</span>
          <span class="value">{{ result }}</span>
        </div>
        <div class="info-row" v-if="result !== '合格'">
          <span class="label">是否可补考</span>
          <span class="value">{{ canRetake ? "是" : "否" }}</span>
        </div>
      </div>

      <!-- 按钮组 -->
      <div class="btn-group">
        <button @click="$emit('end')" class="btn btn-secondary">
          结束考试
        </button>
        <!-- 只有在成绩不合格且允许补考时才显示补考按钮 -->
        <button
          v-if="result !== '合格' && canRetake"
          @click="retakeExam"
          class="btn btn-primary"
        >
          开始补考
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExamResult",
  props: {
    score: {
      type: String,
      default: "",
    },
    result: {
      type: String,
      default: "",
    },
    canRetake: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // console.log("考试成绩:", this.$route.params);
    this.score = this.$route.params.score;
    this.result = this.$route.params.result;
    this.canRetake = this.$route.params.canRetake;
  },
  methods: {
    retakeExam() {
      // 跳转回考试页面    query参数---重置内容
      this.$router.push({ name: "PortalExam", query: { retake: "true" } });
    },
  },
  emits: ["end", "retake"],
};
</script>

<style scoped>
.result-page {
  font-family: "Microsoft YaHei", sans-serif;
  background-color: #f9f9f9;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 1.8rem;
  color: #333;
  margin: 0;
}

.content-wrapper {
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.content-wrapper h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #2c3e50;
}

.result-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.info-row:last-child {
  border-bottom: none;
}

.label {
  font-weight: 500;
  color: #555;
  width: 100px;
}

.value {
  font-size: 1.1rem;
  color: #333;
  text-align: right;
}

.btn-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.btn-secondary {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  background-color: #f0f0f0;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}
</style>